<template>
  <div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column
        v-loading="loading"
        align="center"
        label="tid"
        width="65"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" label="任务地点">
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="是否完成">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="结束时间" width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.pageviews }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.timestamp }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button v-if="scope.row.author" type="primary" @click="handleSubmit(scope.row)">提交文档</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 隐藏的文件输入元素 -->
    <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      currentRow: null,
      uid 
    };
  },
  methods: {
    handleSubmit(row) {
      this.currentRow = row;
      // 使用 $nextTick 确保 $refs 已经被正确挂载
      this.$nextTick(() => {
        this.$refs.fileInput.click(); // 触发文件选择对话框
      });
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      this.uid = sessionStorage.getItem('uid')
      const reader = new FileReader();
        reader.onload = (e) => {
          const fileContent = e.target.result;
          // 假设文件标题在第一行
          const title = fileContent.split('\n')[0];
        };
      if (file) {
        const formData = new FormData();
        formData.append("file", file);
        formData.append("title", title);
        formData.append("uid", this.uid);
        formData.append("tid", this.currentRow.id); // 使用当前行的 ID

        const requestOptions = {
          method: 'POST',
          headers: {
            "User-Agent": "Apifox/1.0.0 (https://apifox.com)"
          },
          body: formData,
          redirect: 'follow'
        };

        fetch("http://1.92.204.101:5000/report/submit_report", requestOptions)
          .then(response => response.text())
          .then(result => {
            console.log(result);
            this.$message.success('文档提交成功');
          })
          .catch(error => {
            console.log('error', error);
            this.$message.error('文档提交失败');
          });

        // 清空文件输入，以便再次选择相同文件时触发change事件
        this.$refs.fileInput.value = null;
      }
    }
    
  }
};
</script>
